<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="wrap">
        <h2 id="title">hello</h2>
        <ul class="list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </ul>
    </div>
    <input class="demo" type="text">
</body>
<script>
     // 构造函数版
    //  function GetEle(selector) {
    //     // {}
    //     // {}[[Prototype]] = GetEle.prototype;
    //     // this -> {}

    //     this.eles = document.querySelectorAll(selector);

    //     // return this;  // 实例化对象 {eles:[x,x,x,x,x,]}  // 每次使用被获取的元素 需要 this.eles  => 取值较为麻烦 -> 如果能将 eles直接作为构造函数的返回值(自定义实例) =>  原型对象上方法取值就可以变得更加简单 
    // }

    // GetEle.prototype.getText = function () {
    //     // this -> 调用此方法的实例化对象
    //     // 默认获取集合中的第一个 
    //     return this.eles[0].innerText;
    // }

    // GetEle.prototype.setText = function (con) {
    //     // this -> 调用此方法的实例化对象
    //     for (var i = 0; i < this.eles.length; i++) {
    //         var ele = this.eles[i];
    //         ele.innerText = con;
    //     }
    // }

    // text()   获取和设置文本内容(操作实例化对象的eles中的所有元素)  
    // GetEle.prototype.text = function (con) {
    //     if (arguments.length >= 1) { // 有参数 => 设置
    //         for (var i = 0; i < this.eles.length; i++) {
    //             var ele = this.eles[i];
    //             ele.innerText = con;
    //         }
    //     } else { // 没有参数
    //         return this.eles[0].innerText;
    //     }
    // }
</script>
<script>

    // 优化版(伪数组)
    function GetEle(selector) {
        // {}
        // {}[[Prototype]] = GetEle.prototype;
        // this -> {}
        
        // debugger;
        var eles = document.querySelectorAll(selector);  // 获取元素(伪数组) => 用于后期操作元素

        eles = Array.from(eles); // 伪数组转真数组
        Object.setPrototypeOf(eles,GetEle.prototype);  // eles.__proto__ = GetEle.prototype

        return eles;  // 自定义实例化对象(伪数组)  this => 伪数组 (有数组的特性但是原型属性[[Prototype]] => GetEle.Prototype)
    }

    // text()   获取和设置文本内容(操作实例化(伪数组中的所有元素))  
    // text("123123")  有参数就设置
    // text()          没有参数就获取   
    GetEle.prototype.text = function (con) {
        // this -> 调用此方法的实例化对象(伪数组 -> 元素的集合)
        if (arguments.length >= 1) { // 有参数 => 设置
            for (var i = 0; i < this.length; i++) {
                var ele = this[i];
                ele.innerText = con;
            }
        } else { // 没有参数  => 默认返回集合中的第一个
            return this[0].innerText;
        }
    }

    // html()   获取和设置html结构(操作实例化(伪数组中的所有元素))  
    // html("123123")  有参数就设置
    // html()          没有参数就获取 
    GetEle.prototype.html = function (con) {
        // this -> 调用此方法的实例化对象(伪数组 -> 元素的集合)
        if (arguments.length >= 1) { // 有参数 => 设置
            for (var i = 0; i < this.length; i++) {
                var ele = this[i];
                ele.innerHTML = con;
            }
        } else { // 没有参数
            return this[0].innerHTML;
        }
    }
    
    // val()   获取和设置元素的value值(操作实例化对象(伪数组中的所有元素))  
    // val("123123")  有参数就设置
    // val()          没有参数就获取 
    GetEle.prototype.val = function (con) {
        // this -> 调用此方法的实例化对象(伪数组 -> 元素的集合)
        if (arguments.length >= 1) { // 有参数 => 设置
            for (var i = 0; i < this.length; i++) {
                var ele = this[i];
                ele.value = con;
            }
        } else { // 没有参数
            return this[0].value;
        }
    }

    // hide()  元素隐藏(操作实例化对象(伪数组中的所有元素) => 将去隐藏)
    // show()  元素显示(操作实例化对象(伪数组中的所有元素) => 将去隐藏)

    GetEle.prototype.hide = function(){
        // this -> 调用此方法的实例化对象(伪数组 -> 元素的集合)
        // console.log("this",this);
        for(var i=0;i<this.length;i++){
            var ele = this[i];
            ele.style.display = "none";
        }
    }

    GetEle.prototype.show = function(){
        // this -> 调用此方法的实例化对象(伪数组 -> 元素的集合)
        // console.log("this",this);
        for(var i=0;i<this.length;i++){
            var ele = this[i];
            ele.style.display = "block";
        }
    }






    var $title = new GetEle("#title"); // 调用构造函数 => 获取元素返回实例化对象(伪数组)
    console.log($title);

    // 调用GetEle.prototype上的方法
    // $title.text("123123");
    // console.log($title.text());

    // $title.hide();
    // setTimeout(()=>{
    //     $title.show();
    // },2000)


    var $liList = new GetEle(".list li");
    console.log($liList);

    // $liList.hide();
    
    // setTimeout(()=>{
    //     $liList.html("456456");
    //     $liList.show();
    // },2000)

    // var $demo = new GetEle(".demo");
    // console.log($demo);
    // $demo.val("111222333")
    // console.log($demo.val());





</script>

</html>